import React, { Component } from 'react'
import {View, Text, Image, TouchableOpacity, ScrollView} from 'react-native'
import {request} from '../../network/request'
export default class UserPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inf:{},
      isShow:false,
      dongtai:[]
    }
  }
  componentDidMount() {
    request({
      url:'/home/UserPage',
      method:'post',
      data:{
        name:this.props.route.params.name
      }
    }).then (res => {
      // console.log(res)
      this.setState({
        inf:res.data,
        isShow:true,
        dongtai:res.data.dongtai
      })
    }).catch(err => {
      console.log(err)
    })
  }
  render() {
    let {inf, isShow, dongtai} = this.state
    let a = dongtai.length == 0? 800:dongtai.length*400
    if(!isShow) {
      return <View></View>
    }else {
      return (
        <View>
            {/* 背景图片 */}
              <Image source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605500544523&di=c1756f455e7e3b5c87b95fff2ab6e349&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F53b216de03de3.jpg'}}
                style={{height:180}}
            ></Image>
            <ScrollView>
              <View style={{height:a}}>
                 {/* 个人信息 */}
              <View style={{height:70,backgroundColor:'white',padding:5,paddingBottom:10}}>
             
             <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'flex-start'}}>
               <Text>{inf.name}</Text>
               <Image source={require('../../assets/img/nansheng.png')}
                 style={{height:20, width:20, marginLeft:5}}
               ></Image>
               <Text>{inf.age}</Text>
             </View>
             <View>
               <Text>单身 | {inf.school?inf.school:'本科'} | 年龄相仿</Text>
             </View>
            
             <View style={{position:'absolute',right:10,top:5,height:50,width:50,flex:1,justifyContent:'center',alignItems:'center'}}>
               <Image source={require('../../assets/img/collection.png')}
                 style={{height:40,width:40,marginTop:10}}
               >
               </Image>
               <Text style={{color:'pink',textAlign:'center'}}>缘分值</Text>
               <Text style={{position:'absolute',top:10}}>{(Math.random()*30).toFixed(0)}</Text>
             </View>
             </View>
           {/* 聊一聊 */}
             <View style={{height:50,backgroundColor:'white',marginTop:5}}>
             <View style={{height:50,backgroundColor:'white',marginTop:9,flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center',padding:5}}>
               <Text style={{fontSize:15}}>动态</Text>
               <Text style={{marginLeft:2,borderWidth:1,borderRadius:50,height:20,width:20,textAlign:'center',borderColor:'red',backgroundColor:'red',color:'white'}}>{dongtai.length}</Text>
               <TouchableOpacity style={{height:'99%',width:80,borderRadius:15,backgroundColor:'lightblue',marginLeft:180,flex:1,flexDirection:'row',alignItems:'center'}}>
                 <Image source={require('../../assets/img/liaotian.png')}
                   style={{height:20,width:30,marginLeft:5}}
                 ></Image>
                 <Text style={{marginLeft:1}}>聊一聊</Text>
               </TouchableOpacity>
               <TouchableOpacity style={{height:'99%',width:80,borderRadius:15,backgroundColor:'lightgreen',flex:1,flexDirection:'row',alignItems:'center'}}>
                 <Image source={require('../../assets/img/xihuan.png')}
                    style={{height:20,width:20,marginLeft:15}}
                 ></Image>
                 <Text style={{marginLeft:5}}>喜欢</Text>
               </TouchableOpacity>
             </View>
           </View>
           {/* 动态展示 */}
             {
               dongtai.map((item, index) => {
                 return <View style={{marginTop:5,backgroundColor:'white'}}>
                 {/* 个人信息 */}
                 <View style={{height:100}}>
                   <View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center',height:100,backgroundColor:'white'}}>
                       {/* 图片 */}
                       <View style={{height:100,width:100}}>
                         <Image source={{uri:inf.img}}
                           style={{height:100,width:100,borderRadius:50}}
                         ></Image>
                       </View>
                       {/* 个人信息 */}
                       <View style={{height:70,backgroundColor:'green',flex:1,backgroundColor:'white'}}> 
                         <View style={{height:'50%',flex:1,flexDirection:'row',justifyContent:'flex-start',paddingLeft:10}}>
                           <Text style={{fontSize:16}}>{inf.name} 女  {inf.age}</Text>
                           <Image source={require('../../assets/img/nansheng.png')}
                             style={{height:25,width:25,marginLeft:10,marginTop:-3}}
                           ></Image>
                         </View>
                         <View style={{height:'50%',paddingLeft:10,}}>
                           <Text style={{fontSize:16}}>单身|{inf.school}|年龄相仿</Text>
                         </View>
                       </View>
                       {/* 爱心 */}
                       <View style={{height:70,width:80,paddingLeft:20,}}>
                         <Image source={require('../../assets/img/gengduo.png')}
                           style={{height:30,width:30,marginTop:15,marginLeft:15}}
                         ></Image>
                       </View>
                   </View>
                 </View>
                   {/* 动态的内容 */}
                   <View style={{marginTop:10}}>
                     {/* 消息 */}
                     <Text style={{fontSize:17}}>{item.content}</Text>
                     <View style style={{marginTop:10}}>
                        <Text style={{fontSize:17,color:'grey'}}>距离{(Math.random()*10).toFixed(2)}km  {item.time}</Text>
                     </View>
                   </View>
                   {/* 点赞评论 */}
                   <View style={{height:60}}>
                     <View style={{height:60,flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                       <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                         <Image source={require('../../assets/img/dianzan.png')}></Image>
                         <Text style={{fontSize:18,marginLeft:5,color:'grey'}} >2</Text>
                       </View>
                       <View  style={{flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                         <Image source={require('../../assets/img/pinglun.png')}></Image>
                         <Text style={{fontSize:18,marginLeft:5,color:'grey'}}>2</Text>
                       </View>
                       <View  style={{flex:1,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
                         <Image source={require('../../assets/img/019.png')}></Image>
                         <Text style={{fontSize:18,marginLeft:5,color:'grey'}}>2</Text>
                       </View>
                     </View>
                   </View>
               </View>
               })
             }
              </View>
            </ScrollView>
        </View>
      )
    }
  }
}
